<template>
  <div style="width: 60%; margin: 30px auto">
    <div class="header">
      <h2 class="title">
        <el-icon><Notebook /></el-icon>
        我的小测
      </h2>
      <div class="sub-title">已累计完成 {{ data.total }} 次测验</div>
    </div>
    <div style="margin: 20px 0">
      <el-table stripe :data="data.tableData">
        <el-table-column prop="paperName" label="试卷名称" min-width="180">
          <template #default="{row}">
            <div class="paper-name">
              <el-icon><Document /></el-icon>
              <span class="text">{{ row.paperName }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 课程信息 -->
        <el-table-column prop="courseName" label="课程名称" width="140">
          <template #default="{row}">
            <el-tag effect="plain" type="info">
              {{ row.courseName }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 教师信息 -->
        <el-table-column prop="teacherName" label="授课教师" width="120">
          <template #default="{row}">
            <div class="teacher-info">
              <el-icon><User /></el-icon>
              <span>{{ row.teacherName }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template #default="{row}">
            <el-tag type="info" effect="plain">
              {{ row.createdAt }}  <!-- 直接显示原始时间 -->
            </el-tag>
          </template>
        </el-table-column>
        <!-- 分数显示 -->
        <el-table-column prop="score" label="分数" width="120" align="center">
          <template #default="{row}">
            <el-tag effect="light" class="score-tag">
              {{ row.score }} 分
            </el-tag>
          </template>
        </el-table-column>
        <!-- 状态显示 -->
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{row}">
            <el-tag :type="row.status === 0 ? 'warning' : 'success'" effect="light">
              {{ row.status === 0 ? '未评分' : '已评分' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" width="140" fixed="right" align="center">
          <template #default="{row}">
            <el-button
                type="primary"
                size="small"
                @click="navTo('/front/testPaperView?id=' + row.id)"
                class="action-btn"
            >
              <el-icon><View /></el-icon>
              查看试卷
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-wrapper" v-if="data.total">
      <el-pagination
          @current-change="load"
          background
          layout="prev, pager, next"
          :page-size="data.pageSize"
          v-model:current-page="data.pageNum"
          :total="data.total"
          class="custom-pagination"
      />
    </div>
  </div>
</template>

<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {Document, Notebook, View} from "@element-plus/icons-vue";

const data = reactive({
  tableData: [],
  pageNum: 1,
  pageSize: 5,
  total: 0
})

const load = () => {
  request.get('/score/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const navTo = (url) => {
  location.href = url
}
load()

</script>
<style scoped>
.container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.header {
  margin-bottom: 32px;
  text-align: center;
}

.title {
  font-size: 24px;
  color: #303133;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sub-title {
  color: #909399;
  font-size: 14px;
}

.table-card {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  :deep(.el-card__body) {
    padding: 24px;
  }
}

.paper-name {
  display: flex;
  align-items: center;
  gap: 8px;
  .text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
}

.score-tag {
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 16px;
}

.action-btn {
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64,158,255,0.2);
  }
}

.pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .container {
    padding: 0 12px;
    margin: 20px auto;
  }

  .title {
    font-size: 20px;
  }

  .table-card {
    :deep(.el-card__body) {
      padding: 16px;
    }
  }

  :deep(.el-table) {
    th, td {
      padding: 12px 8px !important;
    }
  }
}
</style>
